<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>宠物用品商城 - 商家端</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            max-width: 480px;
            margin: 0 auto;
            height: 100vh;
            overflow-x: hidden;
            position: relative;
            padding-bottom: 60px; /* 为底部导航栏预留空间 */
        }
        
        .page {
            display: none;
            height: 100%;
            overflow-y: auto;
            background-color: white;
        }
        
        .page.active {
            display: block;
        }
        
        header {
            background-color: #2196F3;
            color: white;
            padding: 16px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            position: relative;
        }
        
        .header-actions {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .header-action-btn {
            color: white;
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            padding: 4px;
        }
        
        .back-btn {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 20px;
        }
        
        .container {
            padding: 16px;
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #666;
        }
        
        input, select, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }
        
        button {
            padding: 12px 16px;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #0b7dda;
        }
        
        .full-width {
            width: 100%;
        }
        
        .link-text {
            color: #2196F3;
            text-align: center;
            margin-top: 16px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .error-message {
            color: #f44336;
            font-size: 14px;
            margin-top: 4px;
            display: none;
        }
        
        /* 资质认证样式 */
        .certification-step {
            text-align: center;
            margin-bottom: 24px;
        }
        
        .step-indicator {
            display: flex;
            justify-content: space-between;
            margin: 24px 0;
            position: relative;
        }
        
        .step-indicator::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 30px;
            right: 30px;
            height: 2px;
            background-color: #eee;
            z-index: 1;
        }
        
        .step {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #eee;
            color: #999;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
        }
        
        .step.active {
            background-color: #2196F3;
            color: white;
        }
        
        .step.completed {
            background-color: #4CAF50;
            color: white;
        }
        
        .upload-area {
            width: 100%;
            padding: 32px 16px;
            border: 2px dashed #ddd;
            border-radius: 8px;
            text-align: center;
            margin-bottom: 16px;
            cursor: pointer;
            color: #666;
        }
        
        .upload-icon {
            font-size: 32px;
            margin-bottom: 8px;
        }
        
        .cert-photo {
            width: 100%;
            height: 200px;
            object-fit: contain;
            margin-bottom: 8px;
            border-radius: 8px;
            background-color: #f5f5f5;
        }
        
        /* 底部导航栏 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 480px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            background-color: white;
            border-top: 1px solid #eee;
            padding: 8px 0;
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            font-size: 12px;
            cursor: pointer;
            width: 25%;
        }
        
        .nav-item.active {
            color: #2196F3;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        /* 商品管理样式 */
        .product-item {
            display: flex;
            padding: 16px;
            border-bottom: 1px solid #eee;
            align-items: center;
        }
        
        .product-img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 8px;
            margin-right: 16px;
            background-color: #f5f5f5;
        }
        
        .product-info {
            flex: 1;
        }
        
        .product-name {
            font-size: 16px;
            margin-bottom: 4px;
        }
        
        .product-price {
            color: #f44336;
            font-weight: bold;
        }
        
        .product-stock {
            font-size: 14px;
            color: #666;
            margin-top: 4px;
        }
        
        .product-actions {
            display: flex;
            gap: 8px;
        }
        
        .action-btn {
            padding: 6px 12px;
            font-size: 14px;
        }
        
        .edit-btn {
            background-color: #4CAF50;
        }
        
        .delete-btn {
            background-color: #f44336;
        }
        
        /* 订单管理样式 */
        .order-tabs {
            display: flex;
            border-bottom: 1px solid #eee;
            overflow-x: auto;
        }
        
        .order-tab {
            padding: 12px 16px;
            font-size: 14px;
            white-space: nowrap;
            cursor: pointer;
        }
        
        .order-tab.active {
            color: #2196F3;
            border-bottom: 2px solid #2196F3;
        }
        
        .order-card {
            background-color: white;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .order-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .order-status {
            color: #f44336;
            font-weight: bold;
        }
        
        .order-status.shipped {
            color: #4CAF50;
        }
        
        .order-items {
            margin: 12px 0;
        }
        
        .order-product {
            display: flex;
            margin-bottom: 8px;
        }
        
        .order-product-img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 12px;
        }
        
        .order-product-info {
            flex: 1;
        }
        
        .order-summary {
            margin: 12px 0;
            font-size: 14px;
        }
        
        .summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
        }
        
        .order-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 12px;
        }
        
        .order-action-btn {
            padding: 8px 16px;
            font-size: 14px;
        }
        
        .ship-btn {
            background-color: #4CAF50;
        }
        
        /* 店铺设置样式 */
        .setting-item {
            padding: 16px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }
        
        .setting-label {
            font-size: 16px;
        }
        
        .setting-value {
            color: #666;
            text-align: right;
            flex: 1;
            margin-left: 16px;
        }
        
        .arrow-right {
            color: #ccc;
        }
        
        .store-logo {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            background-color: #f5f5f5;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .store-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 成功提示 */
        .success-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0,0,0,0.7);
            color: white;
            padding: 24px;
            border-radius: 8px;
            display: none;
            z-index: 1000;
        }
        
        .success-modal.active {
            display: block;
        }
        
        /* 表单弹窗 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: flex-end;
            z-index: 1000;
        }
        
        .modal.active {
            display: flex;
        }
        
        .modal-content {
            background-color: white;
            width: 100%;
            max-width: 480px;
            border-radius: 16px 16px 0 0;
            padding: 16px;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: bold;
        }
        
        .close-modal {
            font-size: 24px;
            cursor: pointer;
        }
        
        .modal-buttons {
            display: flex;
            gap: 16px;
            margin-top: 24px;
        }
        
        /* 隐藏登录注册和资质认证页面的底部导航 */
        #loginPage .bottom-nav,
        #registerPage .bottom-nav,
        #certificationPage .bottom-nav,
        #productEditPage .bottom-nav {
            display: none;
        }
        
        /* 商品发布表单样式 */
        .form-row {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .form-col {
            flex: 1;
        }
        
        .upload-preview {
            display: flex;
            gap: 8px;
            margin-top: 8px;
            overflow-x: auto;
            padding-bottom: 8px;
        }
        
        .preview-item {
            width: 80px;
            height: 80px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }
        
        .preview-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .remove-img {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: #f44336;
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 登录界面 -->
    <div id="loginPage" class="page active">
        <header>商家登录</header>
        <div class="container">
            <div class="form-group">
                <label for="loginUsername">账号</label>
                <input type="text" id="loginUsername" placeholder="请输入商家账号">
                <div class="error-message" id="loginUserError">账号不能为空</div>
            </div>
            <div class="form-group">
                <label for="loginPassword">密码</label>
                <input type="password" id="loginPassword" placeholder="请输入密码">
                <div class="error-message" id="loginPwdError">密码不能为空</div>
            </div>
            <button id="loginBtn" class="full-width">登录</button>
            <div class="link-text" id="toRegister">没有账号？去注册</div>
        </div>
        <div class="bottom-nav"></div>
    </div>

    <!-- 注册界面 -->
    <div id="registerPage" class="page">
        <header>商家注册</header>
        <div class="container">
            <div class="form-group">
                <label for="registerStoreName">店铺名称</label>
                <input type="text" id="registerStoreName" placeholder="请输入店铺名称">
                <div class="error-message" id="storeNameError">店铺名称不能为空</div>
            </div>
            <div class="form-group">
                <label for="registerUsername">账号</label>
                <input type="text" id="registerUsername" placeholder="请输入账号">
                <div class="error-message" id="regUsernameError">账号不能为空</div>
            </div>
            <div class="form-group">
                <label for="registerPassword">密码</label>
                <input type="password" id="registerPassword" placeholder="请输入密码">
                <div class="error-message" id="regPasswordError">密码不能为空</div>
            </div>
            <div class="form-group">
                <label for="registerContact">联系人</label>
                <input type="text" id="registerContact" placeholder="请输入联系人姓名">
                <div class="error-message" id="contactError">联系人不能为空</div>
            </div>
            <div class="form-group">
                <label for="registerPhone">联系电话</label>
                <input type="tel" id="registerPhone" placeholder="请输入联系电话">
                <div class="error-message" id="phoneError">联系电话不能为空</div>
            </div>
            <button id="registerBtn" class="full-width">注册</button>
            <div class="link-text" id="toLogin">已有账号？去登录</div>
        </div>
        <div class="bottom-nav"></div>
    </div>

    <!-- 资质认证界面 -->
    <div id="certificationPage" class="page">
        <header>
            <span class="back-btn" onclick="goToPage('loginPage')">◀</span>
            商家资质认证
        </header>
        <div class="container">
            <div class="certification-step">
                <h3>请完成以下资质认证以开启店铺</h3>
                <p style="color: #666; margin-top: 8px;">认证信息将严格保密，仅用于店铺审核</p>
            </div>
            
            <div class="step-indicator">
                <div class="step active">1</div>
                <div class="step">2</div>
                <div class="step">3</div>
            </div>
            
            <!-- 第一步：基本信息 -->
            <div id="step1" class="cert-step active">
                <div class="form-group">
                    <label for="legalPerson">法人姓名</label>
                    <input type="text" id="legalPerson" placeholder="请输入法人姓名">
                </div>
                <div class="form-group">
                    <label for="idCard">身份证号码</label>
                    <input type="text" id="idCard" placeholder="请输入18位身份证号码">
                </div>
                <div class="form-group">
                    <label>身份证正面照片</label>
                    <div class="upload-area" id="idCardFrontUpload">
                        <div class="upload-icon">📷</div>
                        <div>点击上传身份证正面照片</div>
                        <div style="font-size: 12px; margin-top: 4px;">支持JPG、PNG格式，不超过5MB</div>
                    </div>
                </div>
                <div class="form-group">
                    <label>身份证反面照片</label>
                    <div class="upload-area" id="idCardBackUpload">
                        <div class="upload-icon">📷</div>
                        <div>点击上传身份证反面照片</div>
                        <div style="font-size: 12px; margin-top: 4px;">支持JPG、PNG格式，不超过5MB</div>
                    </div>
                </div>
                <button id="toStep2" class="full-width">下一步</button>
            </div>
            
            <!-- 第二步：营业执照 -->
            <div id="step2" class="cert-step" style="display: none;">
                <div class="form-group">
                    <label for="businessLicenseNo">营业执照编号</label>
                    <input type="text" id="businessLicenseNo" placeholder="请输入营业执照编号">
                </div>
                <div class="form-group">
                    <label>营业执照照片</label>
                    <div class="upload-area" id="licenseUpload">
                        <div class="upload-icon">📷</div>
                        <div>点击上传营业执照照片</div>
                        <div style="font-size: 12px; margin-top: 4px;">支持JPG、PNG格式，不超过5MB</div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="businessAddress">经营地址</label>
                    <input type="text" id="businessAddress" placeholder="请输入实际经营地址">
                </div>
                <div class="form-row">
                    <div class="form-col">
                        <button id="backToStep1" style="background-color: #f5f5f5; color: #333;">上一步</button>
                    </div>
                    <div class="form-col">
                        <button id="toStep3">下一步</button>
                    </div>
                </div>
            </div>
            
            <!-- 第三步：店铺信息 -->
            <div id="step3" class="cert-step" style="display: none;">
                <div class="form-group">
                    <label for="storeCategory">店铺主营类别</label>
                    <select id="storeCategory">
                        <option value="">请选择主营类别</option>
                        <option value="petFood">宠物食品</option>
                        <option value="petToy">宠物玩具</option>
                        <option value="petClothes">宠物服饰</option>
                        <option value="petDaily">宠物日用品</option>
                        <option value="petHealth">宠物医疗保健</option>
                        <option value="mixed">综合品类</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="storeIntroduction">店铺简介</label>
                    <textarea id="storeIntroduction" placeholder="请简要介绍您的店铺" rows="4"></textarea>
                </div>
                <div class="form-group">
                    <label>店铺门头照片（可选）</label>
                    <div class="upload-area" id="storeFrontUpload">
                        <div class="upload-icon">📷</div>
                        <div>点击上传店铺门头照片</div>
                        <div style="font-size: 12px; margin-top: 4px;">支持JPG、PNG格式，不超过5MB</div>
                    </div>
                </div>
                <!-- 已移除服务协议勾选框 -->
                <div class="form-row">
                    <div class="form-col">
                        <button id="backToStep2" style="background-color: #f5f5f5; color: #333;">上一步</button>
                    </div>
                    <div class="form-col">
                        <button id="submitCertification">提交认证</button>
                    </div>
                </div>
            </div>
            
            <!-- 认证成功 -->
            <div id="certSuccess" style="display: none; text-align: center; padding: 32px 0;">
                <div style="font-size: 72px; margin-bottom: 16px;">✅</div>
                <h3>资质认证已提交成功！</h3>
                <p style="color: #666; margin: 16px 0;">我们将在1-3个工作日内完成审核</p>
                <p style="color: #666; margin-bottom: 24px;">审核结果将通过短信通知您</p>
                <button id="enterStore" class="full-width">进入店铺后台</button>
            </div>
        </div>
        <div class="bottom-nav"></div>
    </div>

    <!-- 商品管理界面 -->
    <div id="productManagePage" class="page">
        <header>
            商品管理
            <div class="header-actions">
                <!-- 发布商品按钮，点击跳转到发布页面 -->
                <button class="header-action-btn" onclick="openProductPage('add')">➕</button>
            </div>
        </header>
        <div class="container">
            <div class="product-list">
                <div class="product-item">
                    <img src="https://picsum.photos/seed/petfood/200/200" class="product-img" alt="优质宠物粮食">
                    <div class="product-info">
                        <div class="product-name">优质宠物粮食</div>
                        <div class="product-price">¥89.00</div>
                        <div class="product-stock">库存：120件</div>
                    </div>
                    <div class="product-actions">
                        <button class="action-btn edit-btn" onclick="openProductPage('edit', 1)">编辑</button>
                        <button class="action-btn delete-btn" onclick="deleteProduct(1)">删除</button>
                    </div>
                </div>
                <div class="product-item">
                    <img src="https://picsum.photos/seed/pettoy/200/200" class="product-img" alt="宠物益智玩具">
                    <div class="product-info">
                        <div class="product-name">宠物益智玩具</div>
                        <div class="product-price">¥39.00</div>
                        <div class="product-stock">库存：86件</div>
                    </div>
                    <div class="product-actions">
                        <button class="action-btn edit-btn" onclick="openProductPage('edit', 2)">编辑</button>
                        <button class="action-btn delete-btn" onclick="deleteProduct(2)">删除</button>
                    </div>
                </div>
                <div class="product-item">
                    <img src="https://picsum.photos/seed/petcloth/200/200" class="product-img" alt="宠物秋冬装">
                    <div class="product-info">
                        <div class="product-name">宠物秋冬装</div>
                        <div class="product-price">¥59.00</div>
                        <div class="product-stock">库存：45件</div>
                    </div>
                    <div class="product-actions">
                        <button class="action-btn edit-btn" onclick="openProductPage('edit', 3)">编辑</button>
                        <button class="action-btn delete-btn" onclick="deleteProduct(3)">删除</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部导航栏 -->
        <div class="bottom-nav">
            <div class="nav-item active" onclick="goToPage('productManagePage')">
                <div class="nav-icon">📦</div>
                <div class="nav-text">商品</div>
            </div>
            <div class="nav-item" onclick="goToPage('orderManagePage')">
                <div class="nav-icon">📋</div>
                <div class="nav-text">订单</div>
            </div>
            <div class="nav-item" onclick="goToPage('statisticsPage')">
                <div class="nav-icon">📊</div>
                <div class="nav-text">统计</div>
            </div>
            <div class="nav-item" onclick="goToPage('storeSettingPage')">
                <div class="nav-icon">⚙️</div>
                <div class="nav-text">设置</div>
            </div>
        </div>
    </div>

    <!-- 商品发布/编辑页面 -->
    <div id="productEditPage" class="page">
        <header>
            <span class="back-btn" onclick="goToPage('productManagePage')">◀</span>
            <span id="productPageTitle">发布商品</span>
        </header>
        <div class="container">
            <div class="form-group">
                <label for="productName">商品名称 <span style="color: #f44336;">*</span></label>
                <input type="text" id="productName" placeholder="请输入商品名称（不超过30字）">
            </div>
            <div class="form-group">
                <label for="productCategory">商品分类 <span style="color: #f44336;">*</span></label>
                <select id="productCategory">
                    <option value="">请选择分类</option>
                    <option value="food">食品</option>
                    <option value="toy">玩具</option>
                    <option value="cloth">服饰</option>
                    <option value="daily">日用品</option>
                    <option value="health">医疗保健</option>
                </select>
            </div>
            <div class="form-row">
                <div class="form-col">
                    <div class="form-group">
                        <label for="productPrice">商品价格 <span style="color: #f44336;">*</span></label>
                        <input type="number" id="productPrice" placeholder="0.00" step="0.01" min="0">
                    </div>
                </div>
                <div class="form-col">
                    <div class="form-group">
                        <label for="productStock">库存数量 <span style="color: #f44336;">*</span></label>
                        <input type="number" id="productStock" placeholder="0" min="0">
                    </div>
                </div>
            </div>
            <!-- 已移除单位字段 -->
            
            <div class="form-group">
                <label>商品图片 <span style="color: #f44336;">*</span></label>
                <div class="upload-area" id="mainImageUpload">
                    <div class="upload-icon">📷</div>
                    <div>点击上传商品图片</div>
                    <div style="font-size: 12px; margin-top: 4px;">支持JPG、PNG格式，建议尺寸800*800px</div>
                </div>
                <div class="upload-preview" id="mainImagePreview">
                    <!-- 预览图将在这里显示 -->
                </div>
            </div>
            
            <!-- 已移除详情图字段 -->
            
            <div class="form-group">
                <label for="productDesc">商品描述 <span style="color: #f44336;">*</span></label>
                <textarea id="productDesc" placeholder="请输入商品详细描述，介绍商品特点、规格、使用方法等" rows="6"></textarea>
                <div style="font-size: 12px; color: #666; margin-top: 4px;">建议详细描述，有助于提升转化率</div>
            </div>
            
            <!-- 已移除商品属性和商品状态字段 -->
            
            <div class="form-row">
                <div class="form-col">
                    <button style="background-color: #f5f5f5; color: #333; width: 100%;" onclick="goToPage('productManagePage')">取消</button>
                </div>
                <div class="form-col">
                    <button style="width: 100%;" id="saveProductBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 订单管理界面 -->
    <div id="orderManagePage" class="page">
        <header>订单管理</header>
        <div class="order-tabs">
            <div class="order-tab active">全部</div>
            <div class="order-tab">待发货</div>
            <div class="order-tab">已发货</div>
            <div class="order-tab">已完成</div>
            <div class="order-tab">已取消</div>
        </div>
        <div class="container">
            <div class="order-card">
                <div class="order-header">
                    <div>订单编号：20230512001</div>
                    <div class="order-status">待发货</div>
                </div>
                <div class="order-items">
                    <div class="order-product">
                        <img src="https://picsum.photos/seed/petfood/100/100" class="order-product-img" alt="优质宠物粮食">
                        <div class="order-product-info">
                            <div class="product-name">优质宠物粮食</div>
                            <div>数量：1</div>
                            <div class="product-price">¥89.00</div>
                        </div>
                    </div>
                </div>
                <div class="order-summary">
                    <div class="summary-item">
                        <div>买家：</div>
                        <div>张三</div>
                    </div>
                    <div class="summary-item">
                        <div>收货地址：</div>
                        <div>北京市朝阳区...</div>
                    </div>
                    <div class="summary-item">
                        <div>联系电话：</div>
                        <div>138****8000</div>
                    </div>
                    <div class="summary-item">
                        <div>订单总价：</div>
                        <div class="product-price">¥89.00</div>
                    </div>
                    <div class="summary-item">
                        <div>下单时间：</div>
                        <div>2023-05-12 10:30</div>
                    </div>
                </div>
                <div class="order-actions">
                    <button class="order-action-btn ship-btn" onclick="shipOrder(20230512001)">确认发货</button>
                </div>
            </div>
            
            <div class="order-card">
                <div class="order-header">
                    <div>订单编号：20230510002</div>
                    <div class="order-status shipped">已发货</div>
                </div>
                <div class="order-items">
                    <div class="order-product">
                        <img src="https://picsum.photos/seed/pettoy/100/100" class="order-product-img" alt="宠物益智玩具">
                        <div class="order-product-info">
                            <div class="product-name">宠物益智玩具</div>
                            <div>数量：2</div>
                            <div class="product-price">¥39.00</div>
                        </div>
                    </div>
                </div>
                <div class="order-summary">
                    <div class="summary-item">
                        <div>买家：</div>
                        <div>李四</div>
                    </div>
                    <div class="summary-item">
                        <div>订单总价：</div>
                        <div class="product-price">¥78.00</div>
                    </div>
                    <div class="summary-item">
                        <div>发货时间：</div>
                        <div>2023-05-10 16:45</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部导航栏 -->
        <div class="bottom-nav">
            <div class="nav-item" onclick="goToPage('productManagePage')">
                <div class="nav-icon">📦</div>
                <div class="nav-text">商品</div>
            </div>
            <div class="nav-item active" onclick="goToPage('orderManagePage')">
                <div class="nav-icon">📋</div>
                <div class="nav-text">订单</div>
            </div>
            <div class="nav-item" onclick="goToPage('statisticsPage')">
                <div class="nav-icon">📊</div>
                <div class="nav-text">统计</div>
            </div>
            <div class="nav-item" onclick="goToPage('storeSettingPage')">
                <div class="nav-icon">⚙️</div>
                <div class="nav-text">设置</div>
            </div>
        </div>
    </div>

    <!-- 销售统计界面 -->
    <div id="statisticsPage" class="page">
        <header>销售统计</header>
        <div class="container">
            <div style="background-color: #f5f5f5; padding: 16px; border-radius: 8px; margin-bottom: 16px;">
                <div style="text-align: center; margin-bottom: 12px;">本月销售概览</div>
                <div style="display: flex; justify-content: space-around; text-align: center;">
                    <div>
                        <div style="font-size: 24px; font-weight: bold; color: #2196F3;">¥12,580</div>
                        <div style="font-size: 14px; color: #666;">总销售额</div>
                    </div>
                    <div>
                        <div style="font-size: 24px; font-weight: bold; color: #2196F3;">246</div>
                        <div style="font-size: 14px; color: #666;">订单数</div>
                    </div>
                    <div>
                        <div style="font-size: 24px; font-weight: bold; color: #2196F3;">89</div>
                        <div style="font-size: 14px; color: #666;">新增客户</div>
                    </div>
                </div>
            </div>
            
            <div style="margin-bottom: 16px;">
                <div style="margin-bottom: 12px; font-weight: bold;">热销商品</div>
                <div class="product-item">
                    <img src="https://picsum.photos/seed/petfood/200/200" class="product-img" alt="优质宠物粮食">
                    <div class="product-info">
                        <div class="product-name">优质宠物粮食</div>
                        <div>销量：126件</div>
                        <div class="product-price">销售额：¥11,214</div>
                    </div>
                </div>
                <div class="product-item">
                    <img src="https://picsum.photos/seed/pettoy/200/200" class="product-img" alt="宠物益智玩具">
                    <div class="product-info">
                        <div class="product-name">宠物益智玩具</div>
                        <div>销量：98件</div>
                        <div class="product-price">销售额：¥3,822</div>
                    </div>
                </div>
            </div>
            
            <div>
                <div style="margin-bottom: 12px; font-weight: bold;">销售趋势</div>
                <div style="height: 200px; background-color: #f5f5f5; border-radius: 8px; display: flex; align-items: flex-end; padding: 16px; gap: 8px;">
                    <div style="flex: 1; background-color: #2196F3; width: 20px; height: 120px; border-radius: 4px 4px 0 0;"></div>
                    <div style="flex: 1; background-color: #2196F3; width: 20px; height: 180px; border-radius: 4px 4px 0 0;"></div>
                    <div style="flex: 1; background-color: #2196F3; width: 20px; height: 90px; border-radius: 4px 4px 0 0;"></div>
                    <div style="flex: 1; background-color: #2196F3; width: 20px; height: 150px; border-radius: 4px 4px 0 0;"></div>
                    <div style="flex: 1; background-color: #2196F3; width: 20px; height: 170px; border-radius: 4px 4px 0 0;"></div>
                    <div style="flex: 1; background-color: #2196F3; width: 20px; height: 200px; border-radius: 4px 4px 0 0;"></div>
                    <div style="flex: 1; background-color: #2196F3; width: 20px; height: 160px; border-radius: 4px 4px 0 0;"></div>
                </div>
                <div style="display: flex; justify-content: space-between; font-size: 12px; color: #666; margin-top: 8px;">
                    <div>1日</div>
                    <div>5日</div>
                    <div>10日</div>
                    <div>15日</div>
                    <div>20日</div>
                    <div>25日</div>
                    <div>30日</div>
                </div>
            </div>
        </div>
        <!-- 底部导航栏 -->
        <div class="bottom-nav">
            <div class="nav-item" onclick="goToPage('productManagePage')">
                <div class="nav-icon">📦</div>
                <div class="nav-text">商品</div>
            </div>
            <div class="nav-item" onclick="goToPage('orderManagePage')">
                <div class="nav-icon">📋</div>
                <div class="nav-text">订单</div>
            </div>
            <div class="nav-item active" onclick="goToPage('statisticsPage')">
                <div class="nav-icon">📊</div>
                <div class="nav-text">统计</div>
            </div>
            <div class="nav-item" onclick="goToPage('storeSettingPage')">
                <div class="nav-icon">⚙️</div>
                <div class="nav-text">设置</div>
            </div>
        </div>
    </div>

    <!-- 店铺设置界面 -->
    <div id="storeSettingPage" class="page">
        <header>
            <span class="back-btn" onclick="goToPage('productManagePage')">◀</span>
            店铺设置
        </header>
        <div class="container">
            <div class="store-logo" onclick="alert('更换店铺 logo')">
                <img src="https://picsum.photos/seed/storelogo/100/100" alt="店铺 logo">
            </div>
            
            <div class="setting-item" onclick="openSettingModal('storeName')">
                <div class="setting-label">店铺名称</div>
                <div class="setting-value">爱心宠物用品店</div>
                <div class="arrow-right">→</div>
            </div>
            
            <div class="setting-item" onclick="openSettingModal('storeDesc')">
                <div class="setting-label">店铺描述</div>
                <div class="setting-value">专业宠物用品销售，提供优质食品、玩具和日用品</div>
                <div class="arrow-right">→</div>
            </div>
            
            <div class="setting-item" onclick="openSettingModal('contactPerson')">
                <div class="setting-label">联系人</div>
                <div class="setting-value">王经理</div>
                <div class="arrow-right">→</div>
            </div>
            
            <div class="setting-item" onclick="openSettingModal('contactPhone')">
                <div class="setting-label">联系电话</div>
                <div class="setting-value">13900139000</div>
                <div class="arrow-right">→</div>
            </div>
            
            <div class="setting-item" onclick="openSettingModal('businessHours')">
                <div class="setting-label">营业时间</div>
                <div class="setting-value">9:00 - 21:00</div>
                <div class="arrow-right">→</div>
            </div>
            
            <div class="setting-item" onclick="changePassword()">
                <div class="setting-label">修改密码</div>
                <div class="arrow-right">→</div>
            </div>
            
            <button id="logoutBtn" style="background-color: #f44336; margin-top: 32px;" class="full-width">退出登录</button>
        </div>
        <!-- 底部导航栏 -->
        <div class="bottom-nav">
            <div class="nav-item" onclick="goToPage('productManagePage')">
                <div class="nav-icon">📦</div>
                <div class="nav-text">商品</div>
            </div>
            <div class="nav-item" onclick="goToPage('orderManagePage')">
                <div class="nav-icon">📋</div>
                <div class="nav-text">订单</div>
            </div>
            <div class="nav-item" onclick="goToPage('statisticsPage')">
                <div class="nav-icon">📊</div>
                <div class="nav-text">统计</div>
            </div>
            <div class="nav-item active" onclick="goToPage('storeSettingPage')">
                <div class="nav-icon">⚙️</div>
                <div class="nav-text">设置</div>
            </div>
        </div>
    </div>

    <!-- 设置编辑弹窗 -->
    <div class="modal" id="settingModal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title" id="settingModalTitle">编辑店铺名称</div>
                <div class="close-modal" onclick="closeSettingModal()">×</div>
            </div>
            <div class="form-group">
                <input type="text" id="settingValue" placeholder="请输入内容">
            </div>
            <div class="modal-buttons">
                <button style="flex: 1; background-color: #f5f5f5; color: #333;" onclick="closeSettingModal()">取消</button>
                <button style="flex: 1;" onclick="saveSetting()">保存</button>
            </div>
        </div>
    </div>

    <!-- 成功提示弹窗 -->
    <div class="success-modal" id="successModal">操作成功</div>

    <script>
        // 当前编辑的商品ID
        let currentProductId = null;
        // 当前编辑的设置项
        let currentSetting = null;
        // 已上传的图片计数
        let mainImageCount = 0;

        // 页面跳转函数
        function goToPage(pageId) {
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById(pageId).classList.add('active');
            
            // 更新导航栏激活状态
            updateNavActive(pageId);
        }
        
        // 更新导航栏激活状态
        function updateNavActive(pageId) {
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            
            switch(pageId) {
                case 'productManagePage':
                    document.querySelectorAll('.nav-item')[0].classList.add('active');
                    break;
                case 'orderManagePage':
                    document.querySelectorAll('.nav-item')[1].classList.add('active');
                    break;
                case 'statisticsPage':
                    document.querySelectorAll('.nav-item')[2].classList.add('active');
                    break;
                case 'storeSettingPage':
                    document.querySelectorAll('.nav-item')[3].classList.add('active');
                    break;
            }
        }

        // 打开商品发布/编辑页面
        function openProductPage(type, id) {
            // 重置图片计数
            mainImageCount = 0;
            // 清空预览区
            document.getElementById('mainImagePreview').innerHTML = '';
            
            const title = document.getElementById('productPageTitle');
            currentProductId = id;
            
            if (type === 'add') {
                title.textContent = '发布商品';
                // 清空表单
                document.getElementById('productName').value = '';
                document.getElementById('productCategory').value = '';
                document.getElementById('productPrice').value = '';
                document.getElementById('productStock').value = '';
                document.getElementById('productDesc').value = '';
            } else {
                title.textContent = '编辑商品';
                // 根据ID填充表单数据（示例）
                if (id === 1) {
                    document.getElementById('productName').value = '优质宠物粮食';
                    document.getElementById('productCategory').value = 'food';
                    document.getElementById('productPrice').value = '89.00';
                    document.getElementById('productStock').value = '120';
                    document.getElementById('productDesc').value = '本品采用天然食材制作，无谷配方，富含蛋白质和多种维生素，有助于宠物健康成长。';
                    
                    // 添加预览图
                    addImagePreview('mainImagePreview', 'main');
                    mainImageCount++;
                } else if (id === 2) {
                    document.getElementById('productName').value = '宠物益智玩具';
                    document.getElementById('productCategory').value = 'toy';
                    document.getElementById('productPrice').value = '39.00';
                    document.getElementById('productStock').value = '86';
                    document.getElementById('productDesc').value = '帮助宠物开发智力，减少 destructive behavior';
                    
                    // 添加预览图
                    addImagePreview('mainImagePreview', 'main');
                    mainImageCount++;
                } else if (id === 3) {
                    document.getElementById('productName').value = '宠物秋冬装';
                    document.getElementById('productCategory').value = 'cloth';
                    document.getElementById('productPrice').value = '59.00';
                    document.getElementById('productStock').value = '45';
                    document.getElementById('productDesc').value = '保暖舒适，适合秋冬季节穿着';
                    
                    // 添加预览图
                    addImagePreview('mainImagePreview', 'main');
                    mainImageCount++;
                }
            }
            
            goToPage('productEditPage');
        }

        // 登录页面跳转注册
        document.getElementById('toRegister').addEventListener('click', () => {
            goToPage('registerPage');
        });

        // 注册页面跳转登录
        document.getElementById('toLogin').addEventListener('click', () => {
            goToPage('loginPage');
        });

        // 登录功能 - 登录后进入资质认证页面
        document.getElementById('loginBtn').addEventListener('click', () => {
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            const userError = document.getElementById('loginUserError');
            const pwdError = document.getElementById('loginPwdError');
            let isValid = true;

            if (!username) {
                userError.style.display = 'block';
                isValid = false;
            } else {
                userError.style.display = 'none';
            }

            if (!password) {
                pwdError.style.display = 'block';
                isValid = false;
            } else {
                pwdError.style.display = 'none';
            }

            if (isValid) {
                showSuccess('登录成功');
                setTimeout(() => {
                    goToPage('certificationPage');
                }, 1000);
            }
        });

        // 注册功能
        document.getElementById('registerBtn').addEventListener('click', () => {
            const storeName = document.getElementById('registerStoreName').value;
            const username = document.getElementById('registerUsername').value;
            const password = document.getElementById('registerPassword').value;
            const contact = document.getElementById('registerContact').value;
            const phone = document.getElementById('registerPhone').value;
            
            let isValid = true;

            if (!storeName) {
                document.getElementById('storeNameError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('storeNameError').style.display = 'none';
            }

            if (!username) {
                document.getElementById('regUsernameError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('regUsernameError').style.display = 'none';
            }

            if (!password) {
                document.getElementById('regPasswordError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('regPasswordError').style.display = 'none';
            }

            if (!contact) {
                document.getElementById('contactError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('contactError').style.display = 'none';
            }

            if (!phone) {
                document.getElementById('phoneError').style.display = 'block';
                isValid = false;
            } else {
                document.getElementById('phoneError').style.display = 'none';
            }

            if (isValid) {
                showSuccess('注册成功，请登录');
                setTimeout(() => {
                    goToPage('loginPage');
                }, 1000);
            }
        });

        // 资质认证步骤导航
        document.getElementById('toStep2').addEventListener('click', () => {
            document.getElementById('step1').style.display = 'none';
            document.getElementById('step2').style.display = 'block';
            updateStepIndicators(2);
        });

        document.getElementById('backToStep1').addEventListener('click', () => {
            document.getElementById('step2').style.display = 'none';
            document.getElementById('step1').style.display = 'block';
            updateStepIndicators(1);
        });

        document.getElementById('toStep3').addEventListener('click', () => {
            document.getElementById('step2').style.display = 'none';
            document.getElementById('step3').style.display = 'block';
            updateStepIndicators(3);
        });

        document.getElementById('backToStep2').addEventListener('click', () => {
            document.getElementById('step3').style.display = 'none';
            document.getElementById('step2').style.display = 'block';
            updateStepIndicators(2);
        });

        document.getElementById('submitCertification').addEventListener('click', () => {
            // 已移除服务协议验证
            // 隐藏步骤内容，显示成功页面
            document.getElementById('step3').style.display = 'none';
            document.getElementById('certSuccess').style.display = 'block';
        });

        document.getElementById('enterStore').addEventListener('click', () => {
            goToPage('productManagePage');
        });

        // 更新步骤指示器
        function updateStepIndicators(activeStep) {
            const steps = document.querySelectorAll('.step');
            steps.forEach((step, index) => {
                const stepNum = index + 1;
                step.classList.remove('active', 'completed');
                
                if (stepNum < activeStep) {
                    step.classList.add('completed');
                } else if (stepNum === activeStep) {
                    step.classList.add('active');
                }
            });
        }

        // 模拟图片上传功能
        document.getElementById('idCardFrontUpload').addEventListener('click', () => {
            simulateUpload('idCardFrontUpload', '身份证正面照片上传成功');
        });

        document.getElementById('idCardBackUpload').addEventListener('click', () => {
            simulateUpload('idCardBackUpload', '身份证反面照片上传成功');
        });

        document.getElementById('licenseUpload').addEventListener('click', () => {
            simulateUpload('licenseUpload', '营业执照照片上传成功');
        });

        document.getElementById('storeFrontUpload').addEventListener('click', () => {
            simulateUpload('storeFrontUpload', '店铺门头照片上传成功');
        });

        // 商品图片上传
        document.getElementById('mainImageUpload').addEventListener('click', () => {
            if (mainImageCount < 1) {
                addImagePreview('mainImagePreview', 'main');
                mainImageCount++;
                showSuccess('图片上传成功');
            } else {
                alert('最多只能上传1张图片');
            }
        });

        // 模拟上传功能
        function simulateUpload(elementId, message) {
            const uploadArea = document.getElementById(elementId);
            uploadArea.innerHTML = `
                <img src="https://picsum.photos/seed/${elementId}/400/200" class="cert-photo">
                <div>点击更换图片</div>
            `;
            showSuccess(message);
        }

        // 添加图片预览
        function addImagePreview(containerId, type) {
            const container = document.getElementById(containerId);
            const previewId = `${type}-preview-${Date.now()}`;
            
            const previewItem = document.createElement('div');
            previewItem.className = 'preview-item';
            previewItem.id = previewId;
            previewItem.innerHTML = `
                <img src="https://picsum.photos/seed/${previewId}/200/200" class="preview-img">
                <div class="remove-img" onclick="removeImage('${previewId}', '${type}')">×</div>
            `;
            
            container.appendChild(previewItem);
        }

        // 移除图片
        function removeImage(previewId, type) {
            const previewItem = document.getElementById(previewId);
            if (previewItem) {
                previewItem.remove();
                mainImageCount--;
            }
        }

        // 保存商品
        document.getElementById('saveProductBtn').addEventListener('click', () => {
            const name = document.getElementById('productName').value;
            const category = document.getElementById('productCategory').value;
            const price = document.getElementById('productPrice').value;
            const stock = document.getElementById('productStock').value;
            const desc = document.getElementById('productDesc').value;
            
            // 表单验证
            if (!name) {
                alert('请输入商品名称');
                return;
            }
            
            if (!category) {
                alert('请选择商品分类');
                return;
            }
            
            if (!price || price <= 0) {
                alert('请输入有效的商品价格');
                return;
            }
            
            if (!stock || stock < 0) {
                alert('请输入有效的库存数量');
                return;
            }
            
            if (!desc) {
                alert('请输入商品描述');
                return;
            }
            
            if (mainImageCount === 0) {
                alert('请上传商品图片');
                return;
            }
            
            goToPage('productManagePage');
            showSuccess(currentProductId ? '商品更新成功' : '商品发布成功');
        });

        // 删除商品
        function deleteProduct(id) {
            if (confirm('确定要删除该商品吗？删除后不可恢复')) {
                showSuccess('商品已删除');
                // 这里可以添加删除商品的逻辑
            }
        }

        // 发货操作
        function shipOrder(orderId) {
            const logisticsCompany = prompt('请输入物流公司名称：');
            if (!logisticsCompany) return;
            
            const trackingNumber = prompt('请输入物流单号：');
            if (!trackingNumber) return;
            
            showSuccess('发货成功');
            // 这里可以添加订单发货的逻辑
        }

        // 打开设置编辑弹窗
        function openSettingModal(setting) {
            currentSetting = setting;
            const modal = document.getElementById('settingModal');
            const title = document.getElementById('settingModalTitle');
            const input = document.getElementById('settingValue');
            
            // 根据设置项显示不同标题和值
            switch(setting) {
                case 'storeName':
                    title.textContent = '编辑店铺名称';
                    input.value = '爱心宠物用品店';
                    break;
                case 'storeDesc':
                    title.textContent = '编辑店铺描述';
                    input.value = '专业宠物用品销售，提供优质食品、玩具和日用品';
                    break;
                case 'contactPerson':
                    title.textContent = '编辑联系人';
                    input.value = '王经理';
                    break;
                case 'contactPhone':
                    title.textContent = '编辑联系电话';
                    input.value = '13900139000';
                    break;
                case 'businessHours':
                    title.textContent = '编辑营业时间';
                    input.value = '9:00 - 21:00';
                    break;
            }
            
            modal.classList.add('active');
        }

        // 关闭设置弹窗
        function closeSettingModal() {
            document.getElementById('settingModal').classList.remove('active');
        }

        // 保存设置
        function saveSetting() {
            const value = document.getElementById('settingValue').value;
            if (!value) {
                alert('请输入内容');
                return;
            }
            
            closeSettingModal();
            showSuccess('设置已更新');
            // 这里可以添加保存设置的逻辑
        }

        // 修改密码
        function changePassword() {
            const oldPwd = prompt('请输入原密码');
            if (!oldPwd) return;
            
            const newPwd = prompt('请输入新密码');
            if (!newPwd || newPwd.length < 6) {
                alert('密码长度不能少于6位');
                return;
            }
            
            const confirmPwd = prompt('请确认新密码');
            if (newPwd !== confirmPwd) {
                alert('两次输入的密码不一致');
                return;
            }
            
            showSuccess('密码修改成功');
        }

        // 退出登录
        document.getElementById('logoutBtn').addEventListener('click', () => {
            if (confirm('确定要退出登录吗？')) {
                goToPage('loginPage');
            }
        });

        // 显示成功提示
        function showSuccess(message) {
            const modal = document.getElementById('successModal');
            modal.textContent = message;
            modal.classList.add('active');
            setTimeout(() => {
                modal.classList.remove('active');
            }, 1000);
        }

        // 订单标签点击事件
        document.querySelectorAll('.order-tab').forEach(tab => {
            tab.addEventListener('click', () => {
                document.querySelectorAll('.order-tab').forEach(t => {
                    t.classList.remove('active');
                });
                tab.classList.add('active');
            });
        });
    </script>
</body>
</html>
